<template>
  <div class="goods" id="goods" name="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑END -->

    <!-- 分类标签 -->
    <div class="nav">
      <div class="product-nav">
        <div class="title">分类</div>
        <el-tabs type="card" v-model="activeName">
          <!--name 属性与选项卡tabs 的value/v-model 相对应,这里返回当前栏目id -->
          <!--<el-tab-pane label="用户管理" name="first">全部</el-tab-pane>-->
          <el-tab-pane
            v-for="(item,index) in categoriesData"
            :key="index"
            :label="item.catename"
            :name="'' + item.id"
          />
        </el-tabs>
      </div>
    </div>
    <!-- 分类标签END -->

    <!-- 主要内容区 -->
    <div class="main">
      <div class="list">
          <!--  全部商品数据      -->
        <MyList :list="productsData" :more="false"></MyList>
        <div v-if="total_sum == 0" class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
                layout="prev, pager, next"
                background
                :total="total_sum"
                :page-size="per_page"
                :page-count="last_page"
                @current-change="currentChangePage"
                >
        </el-pagination>
      </div>

      <!-- 分页END -->
    </div>
    <!-- 主要内容区END -->
  </div>
</template>
<script>
import MyList from "../components/MyList";
export default {
  name: "Products",
  data() {
    return {
      activeName: "0", // 分类列表默认选中id
      categoriesData: [], // 全部栏目数据
      productsData: [], // 全部商品数据
      current_page: 1, // 当前页
      total_sum: null, //商品总数量
      last_page: null, //共有多少页
      per_page: 15, // 一页显示多少数
    };
  },
  methods: {
    // 获取全部栏目数据
    getCategoriesData() {
      this.$axios.get(this.baseUrl + '/api/v1/categorys')
        .then(response => {
          let result = response.data;
          // 注意:这里本身后端数据库栏目没有全部数据, 我们最好自己在前端添加一个栏目
          let obj = {'catename': '全部', 'id': 0, 'pid': 0};
          result.data.unshift(obj); // unshift 函数向数组添加第一个元素
          if (result.status == 2001 && result.message == "请求成功") {
            this.categoriesData = result.data;
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 获取全部商品数据
    getProductsAllData() {
      this.$axios.get(this.baseUrl + '/api/v1/products?current_page='
              + this.current_page + '&list_rows=' + this.per_page)
        .then(response => {
          let result = response.data;
          this.activeName = "0";
          // 赋值数据
          this.productsData = result.data.data;
          this.current_page = result.data.current_page;
          this.total_sum = result.data.total;
          this.last_page = result.data.last_page;
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 通过栏目id获取对应商品数据
    getProductsDataByCateID(cate_id) {
      this.$axios.get(this.baseUrl + '/api/v1/productsData/'
          + cate_id + "?list_rows=" + this.per_page + '&current_page=' + this.current_page)
              .then(response => {
                  // 改变商品数据
                let result = response.data;
                this.productsData = result.data.data;
                this.current_page = result.data.current_page; // 当前页
                this.total_sum = result.data.total; // 数量总数
                this.last_page = result.data.last_page; // 共多少页
              })
              .catch(error => {
                  console.log(error)
              })
    },
    // 当前页数改变,获取新数据
    currentChangePage(currentChangePage) {
      // 获取当前页数据 (重新赋值当前页)
      this.current_page = currentChangePage;
      // 分页更改当前渲染数据的四种不同执行函数
      // 1.全部商品数据 2.浏览更多 3.搜索数据 4.点击栏目id
        if('cate_id' in this.$route.query && this.$route.query.cate_id != 0) {
            // 首页浏览更多
            this.getProductsDataByCateID(this.$route.query.cate_id);
        }
        else if('keywords' in this.$route.query && this.$route.query.cate_id != 0){
            // 搜索数据
            this.renderSearchProductsData();
        }
        else if (this.activeName != 0) {
            this.getProductsDataByCateID(this.activeName);
        }
        else {
            // 渲染全部商品数据
            this.getProductsAllData();
        }
    },
    // 浏览更多,获取相应商品数据
    renderBrowseMoreData() {
      let cate_id = this.$route.query.cate_id; // 获取浏览更多的栏目id
      if (cate_id != undefined) {
        // 浏览更多,渲染商品数据
       // this.getProductsDataByCateID(cate_id);
        this.activeName = cate_id; // 改变了样式,触发watch
      }
      else {
        // undefined 直接渲染全部商品数据
        this.activeName = "0";
      }
    },
    // 渲染搜索商品数据
    renderSearchProductsData() {
      let keywords = this.$route.query.keywords; // 获取搜索关键字
      this.$axios.get(this.baseUrl + '/api/v1/productSearch?keywords='
              + keywords + '&list_rows=' + this.per_page + '&current_page=' + this.current_page)
              .then(response => {
                let result = response.data.data;
                this.productsData = result.data; // 更新商品数据
                this.current_page = result.current_page;
                this.total_sum = result.total;
                this.last_page = result.last_page;
              })
              .catch(error => {
                console.log(error)
              })
    }
  },
  watch: {
    // 监听activeName变化, 这里的val值就是选中栏目id
    activeName(cate_id) {
        this.$route.query.cate_id = cate_id;
      if (cate_id == 0) {
        // 等于0表示获取全部商品数据
        //   let query = JSON.parse(JSON.stringify(this.$route.query));
        //   query.IsBinding = true
        //   this.$router.push({ path: this.$route.path, query })
        this.getProductsAllData();
      }
      else {
        // 获取当前栏目下面的商品数据
        this.getProductsDataByCateID(cate_id);
      }
    },
    // 监听路由变化
    $route(route) {
      // console.log(this.$route.query.keywords)
      // 处理本身在全部商品页面点击搜索数据不跳转的问题
      // this.renderSearchProductsData();  // 路由变化,重新渲染搜索数据
      // 只有在当前页面搜索数据才触发
      if (this.$route.query.keywords != undefined) {
          this.renderSearchProductsData();
      }
    }
  },
  components: {
    MyList
  },
  // created 第一次进入页面才触发
  created() {
    this.getCategoriesData();
  },
  // activated 每一次进入页面都会触发
  activated() {
    // 进入商品的情况, 1.直接点击全部商品 2.浏览更多  3.搜索商品
    // property in obj  判断对象是否存在这个属性
    // Object.keys(obj name).length == 0 判断对象是否为空 true为空
    if (Object.keys(this.$route.query).length==0) {
      // query参数为空 表示渲染全部商品数据
      this.getProductsAllData();
    }
    else if('cate_id' in this.$route.query) {
      // 首页浏览更多
     this.renderBrowseMoreData();
    }
    else if('keywords' in this.$route.query){
     this.renderSearchProductsData()
    }
  }
};
</script>

<style scoped>
.goods {
  background-color: #f5f5f5;
}
/* 面包屑CSS */
.el-tabs--card .el-tabs__header {
  border-bottom: none;
}
.goods .breadcrumb {
  height: 50px;
  background-color: white;
}
.goods .breadcrumb .el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}
/* 面包屑CSS END */

/* 分类标签CSS */
.goods .nav {
  background-color: white;
}
.goods .nav .product-nav {
  width: 1225px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}
.nav .product-nav .title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}
/* 分类标签CSS END */

/* 主要内容区CSS */
.goods .main {
  margin: 0 auto;
  max-width: 1225px;
}
.goods .main .list {
  min-height: 650px;
  padding-top: 14.5px;
  margin-left: -13.7px;
  overflow: auto;
}
.goods .main .pagination {
  height: 50px;
  text-align: center;
}
.goods .main .none-product {
  color: #333;
  margin-left: 13.7px;
}
/* 主要内容区CSS END */
</style>
